<template>
    <el-table :data="dataList" style="width: 100%">
        <el-table-column prop="bannerid" label="图片编号" />
        <el-table-column prop="alt" label="图片提示" />
        <el-table-column prop="img" label="图片" width="180">
            <template #default="scope">
                <img class="img" :src="scope.row.img" :alt="scope.row.alt">
            </template>
        </el-table-column>
        <el-table-column prop="link" label="图片链接" width="180" />
        <el-table-column prop="flag" label="是否启用" v-if="crud.charAt(2) === '1'">
            <template #default="scope">
                <el-switch v-model="scope.row.flag" class="ml-2"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff69B4"
                    @change="(val: boolean) => changeFlag(scope.row.bannerid, val)" />
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import service from '../../../utils/service';
import { reactive, ref } from "vue"
import { AxiosResponse } from "axios"
import { useRoute } from 'vue-router';
const $route = useRoute()
const crud: string = ($route.meta.crud as string)
type TDataList = {
    link: string,
    img: string,
    alt: string,
    bannerid: string,
    flag: boolean
}

const dataList = reactive<TDataList[]>([])

const photoFlag = ref(true)
const getBannerData = () => {
    service({
        url: `/banner/list`,

    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            dataList.push(...res.data.data)
        }
    })
}
getBannerData()
const changeFlag = (bannerid: string, val: boolean) => {
    service({
        url: `/banner/updateFlag`,
        method: "post",
        data: {
            bannerid: bannerid,
            flag: val
        }
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            console.log("success update");
        }
    })
}


</script>

<style scoped>
.img {
    width: 200px;
    height: 150px;

}
</style>